<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="1000px"
      title="详情"
      :before-close="handleClose"
    >
      <desc-base-info
        :data="info"
        :colnum-info="baseInfo"
        align="right"
        :no-line-height="true"
        label-width="120px"
        class="base-info"
      >
        <template slot="energySubareaType">
          <dict-tag
            :options="dict.type.energy_subarea_type"
            :value="info.energySubareaType"
          />
        </template>
        <template slot="subentryType">
          <dict-tag
            :options="dict.type.subentry_type"
            :value="info.subentryType"
          />
        </template>
        <template slot="siteFunctions">
          <dict-tag
            :options="dict.type.site_functions"
            :value="info.siteFunctions"
          />
        </template>
        <template slot="energyType">
          <dict-tag :options="dict.type.energy_type" :value="info.energyType" />
        </template>
      </desc-base-info>

      <form-button
        slot="footer"
        :show-submit-button="false"
        @cancel="handleClose"
      >
      </form-button>
    </zeda-dialog>
  </div>
</template>
<script>
import { detail } from "@/api/basicdata/monthlyFlowing";
import FormButton from "@/components/FormButton";

export default {
  dicts: [
    "energy_subarea_type",
    "subentry_type",
    "site_functions",
    "energy_type",
  ],
  components: {
    FormButton,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
  },
  data() {
    return {
      info: {},
    };
  },

  computed: {
    baseInfo({ info }) {
      let arr = [
        { label: "时间", prop: "transcriptionTime", colNum: 2 },
        { label: "用能分区", prop: "energySubareaType", colNum: 2 },
        { label: "地址", prop: "address", colNum: 2 },
        { label: "能耗类型", prop: "energyType", colNum: 2 },
        { label: "园区", prop: "park", colNum: 2 },
        { label: "分项类型", prop: "subentryType", colNum: 2 },
        { label: "楼幢", prop: "building", colNum: 2 },
        { label: "场所职能", prop: "siteFunctions", colNum: 2 },
        { label: "楼层", prop: "floor", colNum: 2 },
        { label: "数据来源", prop: "dataSource", colNum: 2 },
        { label: "房间号", prop: "room", colNum: 2 },
        { label: "上期抄表数", prop: "lastValue", colNum: 2 },
        { label: "部门", prop: "department", colNum: 2 },
        { label: "本期抄表数", prop: "totalValue", colNum: 2 },
        { label: "科室", prop: "office", colNum: 2 },
        { label: "本期能耗量", prop: "totalEnergyValue", colNum: 2 },
        { label: "编制单位", prop: "enterprise", colNum: 2 },
        { label: "编制日期", prop: "fillInDate", colNum: 2 },
      ];
      return arr;
    },
  },
  watch: {
    visible(value) {
      if (value && String(this.id).length > 0) {
        this.getInfo();
      }
    },
  },
  methods: {
    getInfo() {
      const that = this;
      detail(that.id)
        .then((res) => {
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          that.info = res.data;
        })
        .catch((err) => {
          that.info = {};
          // this.$message.error("系统错误,请联系管理员!302005");
        });
    },
    handleClose(status) {
      this.$emit("update:visible", false);
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
::v-deep .el-dialog__body {
  @include scrollBar2;
  .title-container {
    padding: 20px 0;
  }
}
</style>
